<template>
	<view>
		<view class="head-bac">
			<view style="height: 1rpx; width: 1rpx"></view>
			<view class="logo"></view>
			<view class="name">自助台球</view>
		</view>
		<view class="z-flex btn-box" style="margin-top: 200rpx">
			<button open-type="getPhoneNumber" class="btn" @getphonenumber="getPhoneNumber">手机号快捷登录</button>
			<view class="mask z-margin-l-32" @tap="read" v-if="!agree"></view>
		</view>
		<view class="z-flex" @tap="clickread">
			<image src="../../static/login/choose.png" v-if="!agree" class="choose_img" mode="" />
			<image src="../../static/login/choosed.png" v-else class="choose_img" mode="" />
			<view class="text_999 z-font-28 z-margin-l-8">
				已阅读并同意
				<text class="money" @tap.stop="infoTap('《用户协议》', 1)">《用户协议》</text>
				和
				<text class="money" @tap.stop="infoTap('《隐私政策》', 2)">《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			agree: false,
			codes:''
		};
	},
	onLoad() {
		this.getWxCode()
	},
	methods: {
		getPhoneNumber(e) {
			console.log(e,'111');
			this.$api.post('/userLogin', {
				iv: e.target.iv,
				code: this.codes,
				encryptedData:e.detail.encryptedData,
				pid:0
			}).then(res => {
				console.log(this.codes,'...........')
				this.$toast('登录成功')
				uni.setStorageSync('token', res.data.user.token);
				uni.setStorageSync('userinfo', res.data.user);
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/index/index',
					})
				},500)
			}).catch(res => {
				
			})
		},
		getWxCode() {
			let that = this;
			uni.login({
				provider: 'weixin',
				"onlyAuthorize": true,
				success: function(loginRes) {
					that.codes = loginRes.code;
				},
				fail(e) {
					console.log(e);
				}
			});
		},
		infoTap(e){
			console.log(e,'222')
		},
		clickread() {
			this.agree = !this.agree;
		},
		read() {
			if (!this.agree) {
				uni.showToast({
					title: '请先阅读并同意《用户协议》《隐私政策》',
					icon: 'none'
				});
			}
		}
	}
};
</script>

<style lang="scss">
.head-bac {
	width: 750rpx;
	height: 524rpx;
	background: linear-gradient(to bottom, #e3f5f2, #eef9f6, #fefeff);
	.logo {
		width: 215rpx;
		height: 215rpx;
		background: #a4a9b7;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		margin: auto;
		margin-top: 298rpx;
	}
	.name {
		margin-top: 36rpx;
		text-align: center;
		font-weight: 800;
		font-size: 56rpx;
		color: #1c274c;
	}
}

.btn-box{
  position: relative;
}
.btn{
  width: 576rpx;
  height: 98rpx;
  background: #4BC264;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  font-weight: bold;
  font-size: 30rpx;
  color: #FFFFFF;
  padding: 30rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 56rpx;
  font-size: 30rpx;
}
.mask{
  position: absolute;
  left: 0;
  top: 0;
  width: 576rpx;
  height: 98rpx;
}
.money{
  color:#50C469;
}
.choose_img{
  width: 30rpx;
  height:30rpx;
}
</style>
